import { useIntersectionObserver } from '@vueuse/core'

export default {
  install (app) {
    app.directive('lazy', {
      // 及他自己的所有子节点都挂载完成后调用
      mounted (el, binding) {
        // 等el节点出现在可以区域的时候，给他的src赋值

        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // el 出现在可视区域了
            stop()

            el.src = binding.value
            el.onerror = function () {
              el.src =
                'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
            }
          }
        })
      }
    })
  }
}
